// 1.布局弹性：元素尺寸和间距能灵活调整
//     使用百分比（%）、vw/vh 等相对单位，而非固定像素（px），让容器宽度随视口大小变化。
//     例如：width: 80%;、padding: 2vw;

// 2.媒体自适应：图片视频等媒体内容自动缩放
//     图片、视频等媒体元素应能根据容器大小自动缩放。
//     典型写法：
//         img, video {
//             max-width: 100%;
//             height: auto;
//         }
// 3.断点（Breakpoints）与媒体查询（Media Queries）

//     根据常见设备宽度设置不同的“断点”，在不同视口下应用不同的样式规则。
//     例如：
//         /* 手机（小于 600px）*/
//         @media (max-width: 599px) { ... }
//         /* 平板（600px ~ 1023px）*/
//         @media (min-width: 600px) and (max-width: 1023px) { ... }
//         /* 桌面（大于等于 1024px）*/
//         @media (min-width: 1024px) { ... }

// 4.移动优先（Mobile-First）
//     从最小屏幕开始编写基础样式，再通过媒体查询向上扩展，以保证核心功能在手机上首先可用。
//     例：在无媒体查询的基础样式中写手机样式，再在 @media (min-width: 600px) 中覆盖、增强布局。


// 5.可访问性与可用性
//     保证文字、按钮、表单控件等在不同尺寸下都具备良好的可读性、点击/触控面积。
//     例如：最小文字不低于 16px，相邻交互元素之间至少留 8–10px 空隙。


// 6.渐进增强（Progressive Enhancement）
//     在不同断点及老浏览器中保证基本功能可用，再逐步引入高级布局特性（如 CSS Grid、Flexbox、动画等）。